<template>
  <div class="basic-setting">
    <el-form ref="formRef" :model="formData" :rules="rules" size="large" label-width="120px" label-position="top">
      <el-form-item label="审批名称" prop="flowName">
        <el-input v-model="formData.flowName" placeholder="请输入审批名称" clearable :style="{width: '100%'}" />
      </el-form-item>
      <el-form-item label="选择分组" prop="flowGroup">
        <el-select v-model="formData.flowGroup" placeholder="请选择分组" clearable :style="{width: '100%'}">
          <el-option
            v-for="(item, index) in flowGroupOptions"
            :key="index"
            :label="item.label"
            :value="item.value"
            :disabled="item.disabled"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="模板图标" prop="icon">
        <img :src="activeIconSrc" style="width: 28px;height: 28px;vertical-align: middle;">
        <el-button plain size="small" style="margin-left: 10px;" @click="dialogVisible = true">选择图标</el-button>
      </el-form-item>
      <el-form-item label="审批说明" prop="flowRemark">
        <el-input
          v-model="formData.flowRemark"
          type="textarea"
          placeholder="请输入审批说明"
          :maxlength="100"
          show-word-limit
          :autosize="{minRows: 4, maxRows: 4}"
          :style="{width: '100%'}"
        />
      </el-form-item>
    </el-form>
    <el-dialog v-model="dialogVisible" title="选择图标" width="600px">
      <img
        v-for="(icon, index) in iconList"
        :key="index"
        :src="icon.src"
        class="icon-item"
        :class="{active: selectedIcon === icon.id}"
        @click="selectedIcon = icon.id"
      >
      <template #footer>
        <span class="dialog-footer">
          <el-button size="small" @click="dialogVisible = false; selectedIcon = formData.flowImg">取 消</el-button>
          <el-button type="primary" size="small" @click="dialogVisible = false; formData.flowImg = selectedIcon">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { ref, computed } from 'vue'

export default {
  props: {
    modelValue: {
      type: Object,
      default: () => {}
    },
    flowGroupOptions: {
      type: Array,
      default: () => []
    }
  },
  emits: ['update:modelValue'],
  setup(props, { emit }) {
    const dialogVisible = ref(false)
    const formRef = ref(null)
    const iconList = []
    const files = import.meta.globEager('../../approverIcon/*.png')
    for (const key in files) {
      if (Object.prototype.hasOwnProperty.call(files, key)) {
        iconList.push({ id: key.replace(/(\..\/|approverIcon\/|\.png)/g, ''), src: files[key].default })
      }
    }

    const selectedIcon = ref(props.modelValue.flowImg || iconList[0].id)

    const activeIconSrc = computed(() => {
      const icon = iconList.find(t => t.id === props.modelValue.flowImg)
      return icon ? icon.src : ''
    })

    const formData = computed(() => props.modelValue)

    if (!formData.value.flowImg) {
      formData.value.flowImg = iconList[0].id
    }

    const rules = {
      flowName: [{
        required: true,
        message: '请输入审批名称',
        trigger: 'blur'
      }],
      flowGroup: [{
        required: true,
        message: '请选择选择分组',
        trigger: 'change'
      }]
    }

    /** 校验表单 */
    const validate = () => {
      return new Promise((resolve, reject) => {
        formRef.value.validate().then(() => {
          resolve(formData.value)
        }).catch((error) => {
          reject(error)
        })
      })
    }

    return {
      dialogVisible,
      formRef,
      iconList,
      selectedIcon,
      activeIconSrc,
      formData,
      rules,
      validate
    }
  }
}
</script>

<style lang="scss" scoped>
  .basic-setting {
    position: relative;
    height: 100%;

    .icon-item {
      width: 40px;
      height: 40px ;
      margin: 6px;
      position: relative;
      cursor: pointer;
      opacity: .5;

      &.active {
        opacity: 1;
      }
      &:hover {
        opacity: 1;
      }
    }
  }
</style>
